<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>关于</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.css" rel="stylesheet">
</head>

<body>
  <!-- Main Navigation -->
    <!-- //登录界面 -->
  <div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog cascading-modal" role="document">
    <!--Content-->
    <div class="modal-content">

      <!--Modal cascading tabs-->
      <div class="modal-c-tabs">

        <!-- Nav tabs -->
        <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
              登录</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
              注册</a>
          </li>
        </ul>

        <!-- Tab panels -->
        <div class="tab-content">
          <!--Panel 7-->
          <div class="tab-pane fade in show active" id="panel7" role="tabpanel">

            <!--Body-->
            <div class="modal-body mb-1">
              <div class="md-form form-sm mb-5">
                <i class="fas fa-envelope prefix"></i>
                <input type="text" id="modalLRInput10" maxlength="11" class="form-control form-control-sm validate">
                <label data-error="wrong" data-success="right" for="modalLRInput10">学号/手机号</label>
              </div>

              <div class="md-form form-sm mb-4">
                <i class="fas fa-lock prefix"></i>
                <input type="password" id="modalLRInput11" class="form-control form-control-sm validate">
                <label data-error="wrong" data-success="right" for="modalLRInput11">密码</label>
              </div>
              <div class="text-center mt-2" id="parentLogin">
                <button class="btn btn-info">登录<i class="fas fa-sign-in ml-1"></i></button>
              </div>
            </div>
            <!--Footer-->
            <div class="modal-footer">
              <div class="options text-center text-md-right mt-1">
                <p>没有账号? <a href="#" class="blue-text">去注册</a></p>
                <p>忘记 <a href="#" class="blue-text">密码?</a></p>
              </div>
              <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">关闭</button>
            </div>

          </div>
          <!--/.Panel 7-->

          <!--Panel 8-->
          <div class="tab-pane fade" id="panel8" role="tabpanel">

            <!--Body-->
            <div class="modal-body">
              <div class="md-form form-sm mb-5">
                <i class="fas fa-envelope prefix"></i>
                <input type="text" id="modalLRInput12" maxlength="11" class="form-control form-control-sm validate">
                <label data-error="wrong" data-success="right" for="modalLRInput12">手机号/学号</label>
              </div>

              <div class="md-form form-sm mb-5">
                <i class="fas fa-lock prefix"></i>
                <input type="password" id="modalLRInput13" class="form-control form-control-sm validate">
                <label data-error="wrong" data-success="right" for="modalLRInput13">你的密码</label>
              </div>

              <div class="md-form form-sm mb-4">
                <i class="fas fa-lock prefix"></i>
                <input type="password" id="modalLRInput14" class="form-control form-control-sm validate">
                <label data-error="wrong" data-success="right" for="modalLRInput14">请确认你的密码</label>
              </div>

              <div class="text-center form-sm mt-2" id="parentZhuce">
                <button class="btn btn-info">注册<i class="fas fa-sign-in ml-1"></i></button>
              </div>

            </div>
            <!--Footer-->
            <div class="modal-footer">
              <div class="options text-right">
                <p class="pt-1">已经有了账号? <a href="#" class="blue-text">去登录</a></p>
              </div>
              <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">关闭</button>
            </div>
          </div>
          <!--/.Panel 8-->
        </div>

      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
  <header>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg  scrolling-navbar">
      <div class="container smooth-scroll">
        <img src="images/logo.png">
        <!--      <a class="navbar-brand" href="#"><strong>LGO</strong></a>-->

        <div class="collapse navbar-collapse " id="navbarSupportedContent-7">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item mx-3  ">
              <a class="nav-link" href="index.html" data-offset="60">首页</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="about.html" data-offset="60">关于</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="news.html" data-offset="60">华软消息</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="man.html" data-offset="60">华软人员</a>
            </li>
            <li class="nav-item">
                <a href=""  data-toggle="modal" data-target="#modalLRForm" data-offset="60" class="nav-link">注册/登录</a>
            </li>
          </ul>

        </div>
      </div>
    </nav>
  </header>
  <!-- Main Navigation -->
  <div class="view">
    <img src="./images/pc-关于_02.png" style="width:100%">

    <div class="mask flex-right">
      <div class="container" style="text-align:right">
        <h3 class="white-text mt-5 wow animated fadeInDownBig">博 学 笃 行&nbsp;&nbsp;&nbsp;与 时 俱 进</h3>
      </div>
    </div>


  </div>

  <div class="container">
    <!-- Content here -->
    <section class="team-section text-center my-5">
      <!-- Section heading -->
      <h2 class="h1-responsive font-weight-bold my-5 ">我们的优点</h2>
      <!-- Grid row -->
      <div class="row text-center pr-5">
        <!-- Grid column -->
        <div class="col-md-3 mb-md-0 mb-5  mr-5 ml-5 pt-5 pb-5 card card-personal  wow animated rollIn">
          <div class="avatar mx-auto">
            <img src="./images/pc-关于_05.png">
          </div>
          <h4 class="font-weight-bold dark-grey-text my-4">方便</h4>
          <h6 class="text-uppercase grey-text mb-3"><strong>随时随地即可查询信息，无需返回宿舍使用电脑在查询</strong></h6>
        </div>
        <!-- Grid column -->
        <!-- Grid column -->
        <div class="col-md-3 mb-md-0 mb-5  ml-5 mr-5 pt-5 pb-5 card card-personal wow animated rollIn">
          <div class="avatar mx-auto">
            <img src="./images/pc-关于_07.png">
          </div>
          <h4 class="font-weight-bold dark-grey-text my-4">省时</h4>
          <h6 class="text-uppercase grey-text mb-3"><strong>扫码取件更加快捷，手机下单预约寄件更加省时，无需排长队</strong></h6>
        </div>
        <!-- Grid column -->
        <!-- Grid column -->
        <div class="col-md-3  ml-5 mr-4 pt-5 pb-5 card card-personal wow animated rollIn">
          <div class="avatar mx-auto">
            <img src="./images/pc-关于_09.png">
          </div>
          <h4 class="font-weight-bold dark-grey-text my-4">全面</h4>
          <h6 class="text-uppercase grey-text mb-3"><strong>随时随地了解全校资讯动态、校内各大活动赛事</strong></h6>
        </div>
        <!-- Grid column -->
      </div>
      <!-- Grid row -->
    </section>
  </div>

  <div class="view">
    <img class="d-block w-100" src="./images/pc-关于_14.png" alt="First slide">
    <div class="mask rgba-black-slight flex-center">
      <div class="container white-text">
        <div class="row justify-content-between">
          <div class="col-4 flex-center  wow animated rotateInDownLeft">
            <img  src="./images/pc-关于_03.png" alt="First slide" width="50%" >
          </div>
          <div class="col-7  wow animated rotateInDownRight">
            <div style="display:flex;flex-direction: column;" class="flex-center">
              <p class="w-100" style="font-size:26px">华软小匠</p>
              <p class="w-100" style="font-size:18px;margin:20px 0 10px 0">
                微华软是广州大学华软软件学院校园服务平台，该平台为学习学子推送了丰富的校园资讯、提供后勤维修、物资申请等功能，是学子们必备的校园神器</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <!-- Content here -->
    <section class="team-section text-center my-5">
      <!-- Section heading -->
      <h2 class="h1-responsive font-weight-bold my-5">工具介绍</h2>
      <!-- Grid row -->
      <div class="row text-center">
        <!-- Grid column -->
        <div class="col-md-4 mb-md-0 mb-5 pb-5">
          <div class="avatar mx-auto">
            <img src="./images/pc-关于_17.png" class="wow fadeInUp">
          </div>
          <h4 class="font-weight-bold dark-grey-text my-4 wow animated zoomInDown">充值中心</h4>
          <h6 class="text-uppercase grey-text mb-3 wow animated zoomInDown"><strong>充值中心，除充值功能外还具备有查询流水账单、办理校园卡挂失以及解挂的功能</strong></h6>
        </div>
        <!-- Grid column -->
        <!-- Grid column -->
        <div class="col-md-4 mb-md-0 mb-5 pb-5">
          <div class="avatar mx-auto">
            <img src="./images/pc-关于_19.png" class="wow fadeInUp">
          </div>
          <h4 class="font-weight-bold dark-grey-text my-4 wow animated zoomInDown">快递通</h4>
          <h6 class="text-uppercase grey-text mb-3 wow animated zoomInDown"><strong>通过扫码收取快递件，更方便快捷，也不会被他人拿错，还可以在线预约寄件，更省时</strong></h6>
        </div>
        <!-- Grid column -->
        <!-- Grid column -->
        <div class="col-md-4 pb-5">
          <div class="avatar mx-auto">
            <img src="./images/pc-关于_21.png" class="wow fadeInUp">
          </div>
          <h4 class="font-weight-bold dark-grey-text my-4 wow animated zoomInDown">后勤维修</h4>
          <h6 class="text-uppercase grey-text mb-3 wow animated zoomInDown"><strong>当学生宿舍设施损坏时可以线上申请维修，如需缴费在手机上缴纳即可，更方便省时</strong></h6>
        </div>
        <!-- Grid column -->
      </div>
      <div class="row text-center">
        <!-- Grid column -->
        <div class="col-md-4 mb-md-0 mb-5 pb-5">
          <div class="avatar mx-auto">
            <img src="./images/pc-关于_26.png" class="wow fadeInUp">
          </div>
          <h4 class="font-weight-bold dark-grey-text my-4 wow animated zoomInDown">物资申请</h4>
          <h6 class="text-uppercase grey-text mb-3 wow animated zoomInDown"><strong>线上申请物资、课室，等待老师审批，节省了学生更多的时间，也方便了老师的工作</strong></h6>
        </div>
        <!-- Grid column -->
        <!-- Grid column -->
        <div class="col-md-4 mb-md-0 mb-5 pb-5">
          <div class="avatar mx-auto">
            <img src="./images/pc-关于_27.png" class="wow fadeInUp">
          </div>
          <h4 class="font-weight-bold dark-grey-text my-4 wow animated zoomInDown">失物招领</h4>
          <h6 class="text-uppercase grey-text mb-3 wow animated zoomInDown"><strong>方便学生更快地找回自己失落的物件，如果丢失或捡到校内学生的物件，均可在此发布</strong></h6>
        </div>
        <!-- Grid column -->
        <!-- Grid column -->
        <div class="col-md-4 pb-5">
          <div class="avatar mx-auto">
            <img src="./images/pc-关于_28.png" class="wow fadeInUp">
          </div>
          <h4 class="font-weight-bold dark-grey-text my-4 wow animated zoomInDown">场馆预约</h4>
          <h6 class="text-uppercase grey-text mb-3 wow animated zoomInDown"><strong>学生可以线上预约校内的体育场馆，根据自己的时间进行安排，避免长时间的等候</strong></h6>
        </div>
        <!-- Grid column -->
      </div>
      <!-- Grid row -->
    </section>
  </div>
  <!-- Footer -->
  <footer class="page-footer font-small elegant-color  pt-2">

    <div class="container">

      <!-- Grid row-->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-12">
          <div class="mb-5 flex-center">

            <a class=" mr-md-5 mr-3 ">
              关于我们
            </a>
            <a class=" mr-md-5 mr-3 ">
              产品展示
            </a>
            <a class=" mr-md-5 mr-3 ">
              友情链接
            </a>
          </div>
        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row-->

    </div>
    <!-- Footer Elements -->
    <!-- Copyright -->
    <div class=" text-center py-4">网站公安备案编号：4001840100050
      粤ICP号：05085382号
    </div>


  </footer>
  <!-- Footer -->

  <!-- SCRIPTS -->
  <!-- JQuery -->
  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>

  <script>
    $(function () {
      new WOW().init();
      $("#parentLogin").click(function () {
      var LoginZhanghao = $("#modalLRInput10").val();
      var LoginMima = $("#modalLRInput11").val();
      var regstr = /^\d{10}|\d{11}$/;
      var regstr2 = /^[0-9a-zA-Z]+$/;
      if(!regstr.test(LoginZhanghao)){
        alert("学号/手机号必须为10-11为数字")
      }else if(!regstr2.test(LoginMima)){
        alert("密码必须数字或者字母")
      }else{
      alert("登录成功")
      window.location.href="index.html";
      }
      })
      $("#parentZhuce").click(function () {
      var LoginZhanghao = $("#modalLRInput12").val();
      var LoginMima1 = $("#modalLRInput13").val();
      var LoginMima2 = $("#modalLRInput14").val();
      var regstr = /^\d{10}|\d{11}$/;
      var regstr2 = /^[0-9a-zA-Z]+$/;
      if(!regstr.test(LoginZhanghao)){
        alert("学号/手机号必须为10-11为数字")
      }else if(!regstr2.test(LoginMima1)){
        alert("密码必须数字或者字母")
      }else if(!regstr2.test(LoginMima2)){
        alert("密码必须数字或者字母")
      }else{
      alert("注册成功")
      window.location.href="index.html";
      }
      })
    })
  </script>
</body>

</html>